<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边栏</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link rel="stylesheet" href="./css/sidebar.css">
</head>
<body>
    <div class="shell">
        <ul class="nav">
            <li class="active" id="logo">
                <a href="#">
                    <div class="icno">
                        <div class="imageBox">
                            <img src="./images/1.jpg" alt="">
                        </div>
                    </div>
                    <div class="text"><span>xiaoliu</span></div>
                </a>
            </li>
            <li>
                <a href="#home">
                    <div class="icno">
                        <i class="fa-solid fa-house"></i>
                    </div>
                    <div class="text"><span>Home</span></div>
                </a>
            </li>
            <li>
                <a href="#theme">
                    <div class="icno">
                        <i class="fa-brands fa-themeisle"></i>
                    </div>
                    <div class="text"><span>Theme</span></div>
                </a>
            </li>
            <li>
                <a href="#wallet">
                    <div class="icno">
                        <i class="fa-solid fa-wallet"></i>
                    </div>
                    <div class="text"><span>Wallet</span></div>
                </a>
            </li>
            <li>
                <a href="#picture">
                    <div class="icno">
                        <i class="fa-regular fa-image"></i>
                    </div>
                    <div class="text"><span>Picture</span></div>
                </a>
            </li>
            <li>
                <a href="#code">
                    <div class="icno">
                        <i class="fa-solid fa-code"></i>
                    </div>
                    <div class="text"><span>QR Code</span></div>
                </a>
            </li>
            <li>
                <a href="#authentication">
                    <div class="icno">
                        <i class="fa-solid fa-list"></i>
                    </div>
                    <div class="text"><span>Authentication</span></div>
                </a>
            </li>
            <li class="active" id="logo">
                <a href="#me">
                    <div class="icno">
                        <div class="imageBox">
                            <img src="./images/1.jpg" alt="">
                        </div>
                    </div>
                    <div class="text"><span>ME</span></div>
                </a>
            </li>
        </ul>
    </div>
    <section id="home">Home</section>
    <section id="theme">Theme</section>
    <section id="wallet">Wallet</section>
    <section id="picture">Picture</section>
    <section id="code">Code</section>
    <section id="authentication">Authentication</section>
    <section id="me">ME</section>
    
</body>
<script>
    let nav = document.querySelectorAll(".nav li");
    function activeLink(){
        nav.forEach((item)=>item.classList.remove("active"));
        this.classList.add("active");
    }
    nav.forEach((item)=>item.addEventListener("click", activeLink));
    
</script>
</html>